<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Radio Button Test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<script type="text/javascript" src="../../include-all.js"></script>

		<script type="text/javascript">
			
			var view = new dorado.widget.View({ layout: "Native" });
			
			var panel = new dorado.widget.Panel({
				layout: new dorado.widget.layout.DockLayout(),
				width: "100%",
				height: 30
			});
			view.addChild(panel);
			
			var radioButton1 = new dorado.widget.RadioButton({
				text: "测试而已",
				value: 'test1'
			});
			var radioButton2 = new dorado.widget.RadioButton({
				text: "测试而已2",
				value: 'test2',
                readOnly: true
			});
			var radioButton3 = new dorado.widget.RadioButton({
				text: "测试而已3",
				value: 'test3'
			});
			
			var radioGroup = new dorado.widget.RadioGroup({
				id: "rg1",
				layout: "grid",
                width: 800,
				radioButtons: [radioButton1, radioButton2, radioButton3],
				value: 'test1',
                readOnly: true,
				listener: {
					onValueChange: function(radioGroup) {
						//alert(radioGroup.get("value"));
					}
				}
			});
			
			view.addChild(radioGroup);
			
			var count = 1;
			
			panel.addChild(new dorado.widget.Button({
				caption: "Set Value",
				listener: {
					onClick: function() {
						var rg1 = this.id("rg1");
						rg1.set("value", "test2");
					}
				},
				layoutConstraint: "left"
			}));
			
			panel.addChild(new dorado.widget.Button({
				caption: "Set FlowLayout",
				listener: {
					onClick: function() {
                        debugger;
						radioGroup.set("layout", radioGroup._layout == "vertical" ? "flow" : "vertical");
					}
				},
				layoutConstraint: "left"
			}));
			
			panel.addChild(new dorado.widget.Button({
				caption: "Set ReadOnly",
				listener: {
					onClick: function() {
						var rg1 = this.id("rg1");
						rg1.set("readOnly", !rg1.get("readOnly"));
					}
				},
				layoutConstraint: "left"
			}));
			
			panel.addChild(new dorado.widget.Button({
				caption: "Get Value",
				listener: {
					onClick: function() {
						var rg2 = this.id("rg2");
						alert(rg2.get("value"));
					}
				},
				layoutConstraint: "left"
			}));
			
			panel.addChild(new dorado.widget.Button({
				caption: "Set Radio Buttons",
				listener: {
					onClick: function() {
						var rg1 = this.id("rg1");
						rg1.set("radioButtons", [{
							value: false,
							text: "Female1"
						}, {
							value: true,
							text: "Male1"
						}]);
					}
				},
				layoutConstraint: "left"
			}));
			
			var rg2 = new dorado.widget.RadioGroup({
				id: "rg2",
				width: "100%",
                layout: "vertical",
				radioButtons: [{
					value: 0,
					text: "Female"
				}, {
					value: 1,
					text: "Male"
				}],
				value: 0,
				listener: {
					onValueChange: function(radioGroup) {
						//alert(radioGroup.get("value"));
					}
				}
			});
			view.addChild(rg2);
			

            var rg3 = new dorado.widget.RadioGroup({
                id: "rg3",
                width: "302",
                layout: "grid",
                radioButtons: [{
                    value: 0,
                    text: "FemaleFemaleFemaleFemale"
                }, {
                    value: 1,
                    text: "Male"
                }, {
                    value: 2,
                    text: "Female"
                }, {
                    value: 3,
                    text: "Male"
                }, {
                    value: 4,
                    text: "Female"
                }, {
                    value: 5,
                    text: "Male"
                }, {
                    value: 6,
                    text: "MaleMaleMaleMaleMaleMale"
                }],
                value: 0,
                listener: {
                    onValueChange: function(radioGroup) {
                        //alert(radioGroup.get("value"));
                    }
                }
            });
            view.addChild(rg3);

			$(document).ready(function() {
				view.render(document.body);
			});
		</script>
        <style>
            div, span {
                -webkit-tap-highlight-color: transparent;
            }
        </style>
	</head>
	<body>
        <style type="text/css">
            .test {
                height: 100px;
            }
            .test .icon {
                height: 100px;
            }
            .test .text {
                line-height: 100px;
            }

            .i-radio {
                white-space: nowrap;
            }

                /* IE 6/7 */
            .i-radiogroup { *zoom: 1; }

            .i-radiogroup:before, .i-radiogroup:after { content: ""; display: table; }

            .i-radiogroup:after { clear: both; }
        </style>
	</body>
</html>
